<!--
 * @Author: 369886629@qq.com 369886629@qq.com
 * @Date: 2025-03-10 15:21:35
 * @LastEditors: 369886629@qq.com 369886629@qq.com
 * @LastEditTime: 2025-04-18 09:24:31
 * @FilePath: \sqeybusiness-h5\src\views\home\hycenter.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="personal-center">
        <!-- 头部信息 -->
        <van-nav-bar title="升级会员" style="background: linear-gradient(to right, #00b4ff, #6610f2); color: white;">
            <template #title>
                <span style="color: white;font-size:14px;">会员中心</span>
            </template>
        </van-nav-bar>
        <div class="avatar-name">
            <van-image round width="80px" height="80px" fit="cover" :src="hyinfo.headimgurl"></van-image>
            <div class="name-level">
                <div  style="margin-bottom:15px;color:#fff;font-size:22px;">{{hyinfo.wxname}}</div>
                <div  style="color:#fff;font-size:22px;">{{hyinfo.hydjname}}</div>
            </div>
        </div>
        <!-- 余额和充值 -->
        <div class="balance-recharge">
            <div class="rownr" style="height:40px;">
                <div class="balance">余额：<span>¥{{ hyinfo.zhye ? hyinfo.zhye:0 }}</span></div>
                <van-button type="primary" size="small" @click="gotoRecharge" class="btncz">充值</van-button>
            </div>
        </div>
        <!-- 功能列表 -->
        <van-list>
            <van-cell title="定制商机" is-link  arrow="horizontal" @click="gotoDzsjinfo">
                <template #icon>
                    <van-icon name="" />
                </template>
            </van-cell>
            <van-cell title="我的商机" is-link arrow="horizontal" @click="gotoMyOrder">
                <template #icon>
                    <van-icon name="" />
                </template>
            </van-cell>
            <van-cell title="消费记录" is-link arrow="horizontal" @click="gotoOrderinfoList">
                <template #icon>
                    <van-icon name="" />
                </template>
            </van-cell>
            <van-cell title="充值记录" is-link arrow="horizontal" @click="gotoRechargeRecord">
                <template #icon>
                    <van-icon name="" />
                </template>
            </van-cell>
            <!-- <van-cell title="我的申诉退款" is-link arrow="horizontal" @click="gotoOrderappeallist">
                <template #icon>
                    <van-icon name="" />
                </template>
            </van-cell> -->
            <!-- <van-cell title="升级会员" is-link arrow="horizontal" @click="gotoRechargeHy">
                <template #icon>
                    <van-icon name="" />
                </template>
            </van-cell> -->
            <van-cell title="完善信息" is-link arrow="horizontal" @click="gotoHyinfo">
                <template #icon>
                    <van-icon name="" />
                </template>
            </van-cell>
        </van-list>

    <!-- 其他部分保持不变 -->
    </div>
</template>

<script>
import { addHyinfo, getAccessToken, getHyinfo, getUserInfo, queryHyinfoByOpenid } from '../../api/api';
import wechat from '../../utils/wechat';

export default {
  data() {
    return {
        active: 'vip',
        menuList: [
            { title: '定制商机', icon: 'envelope' },
            { title: '我的商机', icon: 'coin' },
            { title: '消费记录', icon: 'folder' },
            { title: '通知设置', icon: 'volume' },
            { title: '充值记录', icon: 'shopping - bag' },
            { title: '我的申诉退款', icon: 'yen' },
            { title: '开通会员', icon: 'user' },
            { title: '实名认证', icon: 'lock' }
            ],
            hyid: undefined,
            hyinfo: {  },
            zhye:0,
        }
    },
    created() {
        let openid = localStorage.getItem('openid')
        if(!openid){
            this.getWxopenid()
        }else{
            this.openid = openid
            this.queryHyinfoByOpenid()
        }
    },
    methods: {

        queryHyinfoByOpenid(){
            let that = this 
            let param = {openid:this.openid}
            queryHyinfoByOpenid(param).then(response => {
                if(response.code == 200){
                    if(response.data){
                        that.hyid = response.data.hyid
                        that.hyinfo = response.data
                        localStorage.setItem('hyid', that.hyid)
                        localStorage.setItem('wxname', response.data.wxname)
                        localStorage.setItem('headimgurl', response.data.headimgurl)
                        that.getHyinfo() // 调用getHyinfo方法来获取会员信息
                    }else{
                        that.getWxopenid()
                    }
                }
            })
        },

        getWxopenid(){
            let that = this
            wechat.getOpenId().then(data => {
                let code = data.code
                if (code) {
                    try {
                    let param = {
                        code: code,
                    }
                    getAccessToken(param).then(res => {
                        if(res.code == 200){
                        let access_token = res.data.access_token
                        let openid = res.data.openid
                        that.openid = openid
                        that.accessToken = access_token
                        localStorage.setItem('openid', res.data.openid)
                        localStorage.setItem('accessToken', res.data.access_token)
                        localStorage.setItem('refresh_token', res.data.refresh_token)
                        let data2 = {
                            openid: openid,
                            access_token: access_token
                        }
                        getUserInfo(data2).then(res1 => {
                            if(res1.code == 200){
                                data2 = res1.data
                                that.saveHyinfoByOpenid(data2);
                            }
                        })
                        }
                    })
                    } catch (error) {
                    console.error('获取失败:', error);
                    }
                }
            })
            .catch(error => {
                debugger
                console.error('获取失败:', error)
            })
        },

        // 保存会员信息
        saveHyinfoByOpenid(param){
            let that = this
            param.wxname = param.nickname
            addHyinfo(param).then(response => {
                if(response.code == 200){           
                that.hyid = response.data.hyid
                that.zhye = response.data.zhye
                localStorage.setItem('wxname', response.data.wxname)
                localStorage.setItem('zhye', response.data.zhye)
                localStorage.setItem('hyid', that.hyid)
                that.getHyinfo()
                }else{
                debugger
                console.log('添加失败:', response)
                }
            })
        },
        gotoDzsjinfo() {
            this.$router.push({ path: '/dzsjinfo', query: { hyid: this.hyid, zhye: this.zhye }})
        },
        gotoMyOrder(){
            this.$router.push({ path: '/myorder', query: { hyid: this.hyid, zhye: this.zhye }})
        },
        gotoHyinfo() {
            this.$router.push({ path: '/hyinfo', query: { hyid: this.hyid, zhye: this.zhye }})
        },
        gotoRechargeHy(){
            this.$router.push({ path: '/rechargehy', query: { hyid: this.hyid, zhye: this.zhye }})
        },
        gotoRechargeRecord(){
            this.$router.push({ path: '/rechargerecord', query: { hyid: this.hyid, zhye: this.zhye }})
        },
        gotoOrderinfoList(){ 
            this.$router.push({ path: '/orderinfoList', query: { hyid: this.hyid, zhye: this.zhye }})
        },
        gotoOrderappeallist(){
            this.$router.push({ path: '/orderappeallist', query: { hyid: this.hyid, zhye: this.zhye }})
        },
        getHyinfo() {
            const param = { hyid: this.hyid }
            getHyinfo(param).then(res => {
                if (res.code == 200) {
                    this.hyinfo = res.data
                }
            })
        },
        handleClick(type) {
            this.active = type
        },
        gotoRecharge() {
            this.$router.push({ path: '/recharge', query: { hyid: this.hyinfo.hyid, zhye: this.hyinfo.zhye }})
        }
    }
}
</script>

<style scoped>
.personal-center {
    background-color: #f7f7f7;
}
.header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;;
    flex-direction: column;
    padding: 15px;
}
.avatar-name {
    display: flex;
    flex-direction: row ;
    align-items: flex-start;
    width:100%;
    background: linear-gradient(to right, #00b4ff, #6610f2);
    color: white;
    padding: 15px;
}
.name-level {
    margin-left: 20px;
    font-size: 16px;
}
.balance-recharge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 15px;
    margin: 10px;
    margin-top: 10px;
    border-radius: 5px;
    font-size:15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btncz{
    position:fixed;
    right:30px;
    margin-bottom:10px;
}

.recharge{
    position: absolute;
    right: 30px;
    margin-bottom: 20px;
}
.van-list {
    margin-top: 10px;
}
.van-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.rownr{
    display:flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: flex-start;
}
</style>
